<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签到中心 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #F6F8FA;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding-bottom: 70px;
        }
        
        /* 顶部导航栏 */
        .page-header {
            background-color: #fff;
            padding: 15px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 签到类型选项卡 */
        .signin-tabs {
            display: flex;
            background-color: #fff;
            margin-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            position: relative;
        }
        
        .tab-item.active {
            color: #2B7DE1;
            font-weight: 500;
        }
        
        .tab-item.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #2B7DE1;
            border-radius: 3px 3px 0 0;
        }
        
        /* 签到卡片 */
        .signin-card {
            background-color: white;
            border-radius: 10px;
            margin: 15px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        
        .signin-status {
            font-size: 14px;
        }
        
        .status-pending {
            color: #FAAD14;
        }
        
        .status-completed {
            color: #52C41A;
        }
        
        .signin-time {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .signin-location {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .location-icon {
            color: #2B7DE1;
            margin-right: 10px;
            font-size: 18px;
        }
        
        .location-text {
            font-size: 14px;
            color: #333;
        }
        
        .signin-btn {
            background-color: #2B7DE1;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 12px 0;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .signin-btn.disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        /* 服务签到卡片 */
        .service-signin-card {
            background-color: white;
            border-radius: 10px;
            margin: 15px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .patient-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .patient-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #E6F7FF;
            color: #1890FF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .patient-details {
            flex: 1;
        }
        
        .patient-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .patient-desc {
            font-size: 12px;
            color: #666;
        }
        
        .service-info {
            background-color: #F6F8FA;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 15px;
        }
        
        .service-item {
            display: flex;
            margin-bottom: 8px;
        }
        
        .service-item:last-child {
            margin-bottom: 0;
        }
        
        .service-label {
            width: 70px;
            color: #666;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .service-value {
            color: #333;
            font-size: 14px;
            flex: 1;
        }
        
        .signin-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 6px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: #2B7DE1;
            color: white;
        }
        
        .btn-secondary {
            background-color: #f0f0f0;
            color: #666;
        }
        
        /* 历史记录 */
        .history-list {
            margin: 15px;
        }
        
        .history-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
        }
        
        .history-item {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .history-date {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .history-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .history-location {
            font-size: 14px;
            color: #333;
        }
        
        .history-status {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            background-color: #F6FFED;
            color: #52C41A;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
            text-decoration: none;
        }
        
        .nav-item.active {
            color: #2B7DE1;
        }
        
        .nav-icon {
            font-size: 22px;
            margin-bottom: 2px;
        }
        
        /* 签到记录为空的状态 */
        .empty-state {
            text-align: center;
            padding: 40px 0;
            color: #999;
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .empty-text {
            font-size: 14px;
        }
        
        /* 内容区域 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <div class="page-header">
            <div class="page-title">签到中心</div>
        </div>
        
        <!-- 签到类型选项卡 -->
        <div class="signin-tabs">
            <div class="tab-item active" data-tab="duty-signin">上岗签到</div>
            <div class="tab-item" data-tab="service-signin">服务签到</div>
        </div>
        
        <!-- 上岗签到内容 -->
        <div class="tab-content active" id="duty-signin">
            <!-- 今日上岗签到卡片 -->
            <div class="signin-card">
                <div class="card-header">
                    <div class="card-title">今日上岗签到</div>
                    <div class="signin-status status-pending">待签到</div>
                </div>
                <div class="signin-time">签到时间：08:00 - 09:00</div>
                <div class="signin-location">
                    <div class="location-icon">📍</div>
                    <div class="location-text">北京协和医院 内科护理部</div>
                </div>
                <button class="signin-btn" id="dutySigninBtn">立即签到</button>
            </div>
            
            <!-- 历史签到记录 -->
            <div class="history-list">
                <div class="history-title">历史记录</div>
                <div class="history-item">
                    <div class="history-date">2023-06-11</div>
                    <div class="history-info">
                        <div class="history-location">北京协和医院 内科护理部</div>
                        <div class="history-status">已签到</div>
                    </div>
                </div>
                <div class="history-item">
                    <div class="history-date">2023-06-10</div>
                    <div class="history-info">
                        <div class="history-location">北京协和医院 内科护理部</div>
                        <div class="history-status">已签到</div>
                    </div>
                </div>
                <div class="history-item">
                    <div class="history-date">2023-06-09</div>
                    <div class="history-info">
                        <div class="history-location">北京协和医院 内科护理部</div>
                        <div class="history-status">已签到</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 服务签到内容 -->
        <div class="tab-content" id="service-signin">
            <!-- 待签到服务 -->
            <div class="service-signin-card">
                <div class="card-header">
                    <div class="card-title">服务开始签到</div>
                    <div class="signin-status status-pending">待签到</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">李</div>
                    <div class="patient-details">
                        <div class="patient-name">李先生</div>
                        <div class="patient-desc">65岁 | 高血压 | 内科</div>
                    </div>
                </div>
                <div class="service-info">
                    <div class="service-item">
                        <div class="service-label">服务时间：</div>
                        <div class="service-value">2023-06-15 08:00~17:00</div>
                    </div>
                    <div class="service-item">
                        <div class="service-label">服务地点：</div>
                        <div class="service-value">北京协和医院 5号楼 302室</div>
                    </div>
                </div>
                <div class="signin-actions">
                    <div class="action-btn btn-primary" id="startServiceBtn">开始服务</div>
                    <div class="action-btn btn-secondary" id="viewOrderBtn" onclick="window.location.href='order-detail.html?id=12345'">查看详情</div>
                </div>
            </div>
            
            <div class="service-signin-card">
                <div class="card-header">
                    <div class="card-title">服务结束签到</div>
                    <div class="signin-status status-pending">待签到</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">王</div>
                    <div class="patient-details">
                        <div class="patient-name">王奶奶</div>
                        <div class="patient-desc">78岁 | 骨折康复 | 骨科</div>
                    </div>
                </div>
                <div class="service-info">
                    <div class="service-item">
                        <div class="service-label">服务时间：</div>
                        <div class="service-value">2023-06-12 08:00~17:00</div>
                    </div>
                    <div class="service-item">
                        <div class="service-label">服务地点：</div>
                        <div class="service-value">北京友谊医院 2号楼 508室</div>
                    </div>
                </div>
                <div class="signin-actions">
                    <div class="action-btn btn-primary" id="endServiceBtn">结束服务</div>
                    <div class="action-btn btn-secondary" id="viewOrderBtn2">查看详情</div>
                </div>
            </div>
            
            <!-- 历史服务签到记录 -->
            <div class="history-list">
                <div class="history-title">历史记录</div>
                <div class="history-item">
                    <div class="history-date">2023-06-08</div>
                    <div class="history-info">
                        <div class="history-location">张先生 | 北京友谊医院</div>
                        <div class="history-status">已完成</div>
                    </div>
                </div>
                <div class="history-item">
                    <div class="history-date">2023-06-05</div>
                    <div class="history-info">
                        <div class="history-location">刘女士 | 北京协和医院</div>
                        <div class="history-status">已完成</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item active">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换功能
            const tabItems = document.querySelectorAll('.tab-item');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新选项卡状态
                    tabItems.forEach(tab => tab.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新内容区域
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 上岗签到按钮
            const dutySigninBtn = document.getElementById('dutySigninBtn');
            dutySigninBtn.addEventListener('click', function() {
                // 获取当前位置
                if (navigator.geolocation) {
                    dutySigninBtn.textContent = '定位中...';
                    dutySigninBtn.disabled = true;
                    dutySigninBtn.classList.add('disabled');
                    
                    setTimeout(() => {
                        const signinStatus = document.querySelector('.signin-card .signin-status');
                        signinStatus.textContent = '已签到';
                        signinStatus.classList.remove('status-pending');
                        signinStatus.classList.add('status-completed');
                        
                        dutySigninBtn.textContent = '今日已签到';
                        dutySigninBtn.disabled = true;
                        dutySigninBtn.classList.add('disabled');
                        
                        alert('签到成功！');
                    }, 1500);
                } else {
                    alert('您的浏览器不支持地理定位，请允许位置权限或更换浏览器再试');
                }
            });
            
            // 服务开始签到按钮
            const startServiceBtn = document.getElementById('startServiceBtn');
            startServiceBtn.addEventListener('click', function() {
                if (confirm('确认开始服务？')) {
                    startServiceBtn.textContent = '服务中';
                    startServiceBtn.disabled = true;
                    startServiceBtn.classList.add('disabled');
                    
                    const signinStatus = startServiceBtn.closest('.service-signin-card').querySelector('.signin-status');
                    signinStatus.textContent = '服务中';
                    signinStatus.classList.remove('status-pending');
                    signinStatus.classList.add('status-completed');
                    
                    alert('已成功开始服务！请按时完成服务并进行结束签到。');
                }
            });
            
            // 服务结束签到按钮
            const endServiceBtn = document.getElementById('endServiceBtn');
            endServiceBtn.addEventListener('click', function() {
                if (confirm('确认结束服务？')) {
                    endServiceBtn.textContent = '已完成';
                    endServiceBtn.disabled = true;
                    endServiceBtn.classList.add('disabled');
                    
                    const signinStatus = endServiceBtn.closest('.service-signin-card').querySelector('.signin-status');
                    signinStatus.textContent = '已完成';
                    signinStatus.classList.remove('status-pending');
                    signinStatus.classList.add('status-completed');
                    
                    alert('服务已成功结束！');
                }
            });
            
            // 查看订单详情按钮
            document.getElementById('viewOrderBtn2').addEventListener('click', function() {
                window.location.href = 'order-detail.html?id=12346';
            });
        });
    </script>
</body>
</html> 